<!--
 * @Author: your name
 * @Date: 2021-01-07 14:02:36
 * @LastEditTime: 2021-01-13 10:30:01
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\test\deviceTest\deviceTest.vue
-->
<template>
    <div class="test-deviceTest-main-box">
        <div class="search-box">
            <div class="search-box-sub">
                <span class="lable-text">{{$t('salePage.wifiSN')}}</span>
                <el-input v-model="sn" clearable></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('index.timeHorizon')}}</span>
                <el-date-picker
                v-model="startTime"
                type="date"
                :placeholder="$t('selectDate')"
                value-format='yyyy-MM-dd'
                :clearable='true'
                :picker-options="pickerOptions"
                >
                </el-date-picker>
                -
                <el-date-picker
                v-model="endTime"
                type="date"
                :placeholder="$t('selectDate')"
                value-format='yyyy-MM-dd'
                :clearable='true'
                :picker-options="pickerOptions"
                >
                </el-date-picker>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('sn.snStatus')}}</span>
                <el-select v-model="status" filterable :placeholder="$t('pleaseSelect')" :clearable='true'>
                    <el-option
                    v-for="item in statusList"
                    :key="item.id"
                    :label="item.text"
                    :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="search-box-sub">
                <el-button type="primary" @click='query' >{{$t('query')}}</el-button>
            </div>
        </div>
        <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe @selection-change="handleSelectionChange($event)"  :column='column' :select='true'>
            <template #status="{data}">
              {{comm.returnCode(statusList,data.status,'id','text')}}
            </template>
                <!-- v-if='data.status == 1' -->
            <template #option="{data}">
                <div class="option-box">
                    <el-popconfirm
                    :confirm-button-text="$t('sure')"
                    :cancel-button-text="$t('cancel')"
                    title="确定要恢复该电站吗？"
                    @confirm='attackLogRecorvery(data)'
                    v-if='data.status == 1'
                    >
                        <el-button  type="danger" slot="reference" icon='el-icon-refresh' :title="$t('test.deviceTest.js_TestDevice_exportExcel')" ></el-button>
                    </el-popconfirm>
                </div>
            </template>
        </baseTable>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
    </div>
</template>

<script>
import baseTable from '../../../components/common/baseTable'
export default {
    components: {
        baseTable,
    },
    props: {

    },
    data() {
        return {
            pickerOptions:{ //禁用今天之后的时间
                disabledDate(time) {
                    return time.getTime() > Date.now()
                }
            },
            statusList:[{
                id:'0',
                text:'恢复'
            },{
                id:'1',
                text:'未恢复'
            }],
            dictCodes:[],
            sn:'',
            status:'',
            startTime:'',
            endTime:'',
            loading:false,
            dataRows:[],
            column:[{
                title: this.$t('test.deviceTest.wifiSN'),
                value: 'sn',
            },
            {
                title: this.$t('warrantyManage.userName'),
                value: 'loginName',
                slot: 'loginName',
            },
            {
                title: this.$t('site.siteName'),
                value: 'siteName',
                slot: 'siteName',
            },{
                title: this.$t('sn.snStatus'),
                value: 'status',
                slot: 'status',
            },
            {
                title: '攻击时间',
                value: 'attackTime',
                slot: 'attackTime',
            },{
                title: '恢复时间',
                value: 'recorveryTime',
                slot: 'recorveryTime',
            },
            {
                title: this.$t('control'),
                slot: 'option',
            }],
            selectDataList:[],
            size:10,
            current:1,
            total:0
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.deviceTestGetPage()
    },
    methods: {
        async attackLogRecorvery(data){
            let res = await this.API.attackLogRecorvery({
                id:data.id
            })
            if(this.comm.showMsg(res.success)){
                this.deviceTestGetPage()
            }
        },
        async deviceTestGetPage(){
            this.loading = true
            let res = await this.API.attackLogGetPage({
                sn:this.sn,
                status:this.status,
                attackTimeBefore:this.startTime,
                attackTimeAfter:this.endTime,
                size:this.size,
                current:this.current,
            })
            this.dataRows = res.rows
            this.total = res.total
            this.loading = false
        },
        saleDeleteBatch(){

        },
        query(){
            this.current = 1
            this.deviceTestGetPage()
        },
        handleSelectionChange(data){
            this.selectDataList = data
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.deviceTestGetPage()
        },
        handleCurrentChange(val) {
          this.current = val
          this.deviceTestGetPage()
        },
    },
};
</script>

<style  lang="less" scoped>

</style>
